<template>
	<div class="addnews k w944">
		<alert ref="alert"></alert>
		<div class="label_top">
			<button @click="cancel"><i><&nbsp;</i>返回</button>
			<p>{{updateTitle}}</p>
		</div>
		<div class="addCont">
			<div class="addName marB"><span>新闻标题：</span>
				<el-input placeholder="请输入新闻标题" v-model="newsTitle"></el-input>
			</div>
			<div class="addName addFeilei marB">
				<span class="tit">新闻分类：</span>
				<el-select v-model="courseColumnYi" placeholder="请选择一级分类" @change="selectChange(courseColumnYi,KcColumnYi)">
					<el-option v-for="item in KcColumnYi" :key="item.id" :label="item.columnName" :value="item.id"></el-option>
				</el-select>
				<el-select v-model="courseColumn" placeholder="请选择子分类" style="margin-left: 21px;">
					<el-option v-for="item in KcColumnEr" :key="item.id" :label="item.columnName" :value="item.id"></el-option>
				</el-select>
			</div>
			<div class="addName marB from"><span>新闻来源：</span>
				<el-input placeholder="" v-model="newFrom"></el-input>
			</div>
			<div class="addSubVideolist marB">
				<span>新闻列表图：</span>
				<div class="updownvideo">
					<el-upload class="avatar-uploader" refs="uploadxls" action="http://www.h3clearning.com/huathree-back/uploadFile" :headers="myHeaders" :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"><b style="display:block;font-weight:normal"><em>上传图片</em></b></i>
					</el-upload>
					<em class="rules">建议尺寸为750*373像素，大小小于1M</em>
				</div>
			</div>
			<div class="addSubJieshao">
				<span style="margin-bottom: 25px;display: block;width: 96px;text-align: right;">新闻内容：</span>
				<vue-ueditor-wrap v-model="msg" :config="myConfig" style="margin-left: 74px;"></vue-ueditor-wrap>
			</div>
			<div class="footerButton">
				<a @click="checkSave" v-bind:style="{background: clickLock==true ? '#44CEF6' : '#3a8ee6'}">保存</a>
				<a @click="cancel" class="cancel">取消</a>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	export default {
		data() {
			return {
				clickLock:true,
				values: '',
				updateTitle:'新增资讯',
				id:'',
				newsTitle: '',
				newFrom: '',
				imageUrl: '',
				msg: '',
				myConfig: {
					autoHeightEnabled: false,
					initialFrameHeight: 420,
					initialFrameWidth: '840'
				},
				columnNameYi: '',
				columnNameEr: '',
				courseColumnYi: '',
				courseColumn: '',
				KcColumnYi: [],
				KcColumnEr: [],
				myHeaders:{Authorization:this.$root.userInfoMsg.sessionId},
			}
		},
		methods: {
			getParams() {
				var routerParams = this.$route.params.type;
				if(routerParams == 'edit') {
					this.nowType = 'edit';
					this.updateTitle = "编辑资讯";
				}else{
					this.nowType = 'add';
				}
			},
			addNews() {
				let that = this;
				if(this.clickLock==true){
					this.clickLock = false;
					this.$ajax({
						url: this.$root.jifuUrl + '/mns/kcCourse/addKcCourseFrontNews',
						headers:{'ContentType': 'application/json; charset=utf-8'},
						data: {
							courseName: that.newsTitle,
							courseColumnYi: that.courseColumnYi,
							courseColumn: that.courseColumn,
							courseImg: that.imageUrl,
							courseDesc: that.msg,
							sourceFrom:that.newFrom,
							rootcompanyid:1,
							courseType:2
						},
						method: 'POST',
						success: res => {
							if(res.data.code == 200) {
								this.$refs.alert.show({alertText: '保存成功'});
								setTimeout(() =>{
									this.$router.push({
										name:'news'
									});
								},2000)
							}else{
								this.clickLock = true;
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}
			},
			updateNews() {
				//编辑咨询
				let that = this;
				let s = {
					id:that.id,
					courseName: that.newsTitle,
					courseColumnYi: that.courseColumnYi,
					courseColumn: that.courseColumn,
					courseImg: that.imageUrl,
					courseDesc: that.msg,
					sourceFrom:that.newFrom,
					rootcompanyid:1,
					courseType:2
				};
				this.$ajax({
					url: this.$root.jifuUrl + '/mns/kcCourse/updateKcCourseFrontNews',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					data: s,
					method: 'PUT',
					success: res => {
						if(res.data.code == 200) {
							this.$refs.alert.show({alertText: '保存成功'});
							setTimeout(() =>{
								this.$router.push({
									name:'news'
								});
							},2000)
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			checkSave(){
				if(this.nowType == 'add') {
					this.addNews();
				}else if(this.nowType == 'edit') {
					this.updateNews();
				}
			},
			cancel() {
				this.$router.go(-1);
			},
			selectChange(courseColumnYi,KcColumnYi) {
				this.courseColumn='';
				this.KcColumnEr = '';
                this.KcColumnYi.forEach(element => {
                    if(element.id==courseColumnYi){
                        this.KcColumnEr = element.childList;
                    }
                });
            },
//			getxlkKcColumn() {
//				this.$ajax({
//					url: this.$root.jifuUrl + "/mns/kcColumn/xialakuangKcColumnForfenlei",
//					method: 'POST',
//					headers:{'ContentType': 'application/json; charset=utf-8'},
//					data:{columntypeVirtual:2,rootcompanyid:1},
//					success: res => {
//						if(res.data.code == 200) {
//							this.KcColumnYi = res.data.data;
//							this.KcColumnYi.forEach(element => {  
//								if(element.id == this.courseColumnYi){                                    
//									this.KcColumnEr = element.childList                                
//								}                            
//							});
//						}
//					}
//				});
//			},
//			stateWrapClose(){
//				this.wrapClose = false;
//			},
//			stateWrapCloseSecond() {
//				this.wrapCloseSecond = !this.wrapCloseSecond;
//			},
			handleAvatarSuccess(res, file) {
				if(res.code == 200) {
					this.imageUrl = res.data[0];
				};
			},
			beforeAvatarUpload(file) {
				const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png');
				const isLt2M = file.size / 1024 / 1024 < 2;
				if(!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			getColumnList(){
				let columnType = [2];
				this.$rootFunction().columnListAdd({columnType});
			}
		},
		components: {
			alert
		},
		mounted: function(){
			this.getParams();
			this.getColumnList();
			if(this.nowType=="edit"){
				console.log('306',this.nowType,this.$root.newMsg);
				this.id = this.$root.newMsg.id;
				this.newsTitle = this.$root.newMsg.courseName;
				this.newFrom = this.$root.newMsg.sourceFrom;
				this.imageUrl = this.$root.newMsg.courseImg;
				this.msg = this.$root.newMsg.courseDesc;
				this.courseColumnYi = this.$root.newMsg.courseColumnYi
				this.columnNameYi = this.$root.newMsg.columnNameYi
				this.courseColumn = this.$root.newMsg.courseColumn
				this.columnNameEr = this.$root.newMsg.columnNameEr
			};
		}
	}
</script>

<style>
	.addnews .updownvideo {position:absolute;top:0;left:100px;}
	.addnews .addSubVideolist .avatar-uploader,.addnews .addSubVideolist .avatar-uploader .el-upload,.addnews .addSubVideolist .avatar-uploader-icon {width:167px;height:82px;}
	.addnews .avatar-uploader {width:167px;height:82px;}
	.addnews .el-button--primary.is-active,.addnews .el-button--primary:active {background:#44CEF6;border:none}
	.addnews .el-button--small,.addnews .el-button--small.is-round {padding:0;}
	.addnews .upload-demo span {border:none;font-size:14px!important;color:#fff!important;}
	.addnews .upload-demo .el-button {border:none;}
	.addnews .addSubVideo,.addSubVideolist {height:104px!important;position:relative;}
	.addnews .el-upload-list {position:absolute;top:0;left:126px;}
	.addnews .el-upload-list__item-name {font-size:14px;color:#333;}
	.addnews .el-upload-list__item:first-child {margin-top:5px;}
	.addnews .addSubJieshao a {background:#44CEF6;height:33px;line-height:33px;width:100px;display:inline-block;padding:0;border:0;margin-top:135px;}
	.addnews .addSubJieshao a:hover {background:#31c7f2;}
	.addnews .el-select input[type="text"] {height:34px!important;width:155px;}
	.addnews .el-input__icon {line-height:35px;}
	.addnews .avatar-uploader .el-upload {border-radius:6px;cursor:pointer;position:relative;overflow:hidden;width:110px;height:82px;}
	.addnews .avatar-uploader .el-upload:hover {border-color:#409EFF;}
	.addnews .avatar-uploader-icon {font-size:28px;color:#8c939d;width:110px;height:67px!important;padding-top:15px;text-align:center;background:#f2f2f2;}
	.addnews .avatar {width:167px;height:82px;display:block;}
	.addnews .addName span,.addnews .addSubVideo span,.addnews .addSubVideo span,.addnews .addSubVideolist span,.addnews .addSubTuijian span {width:96px;display:inline-block;text-align:right;}
	.addnews .addSubVideo span,.addSubVideolist span {position:absolute;top:0;left:0;}
	.addnews .addName .el-input,.addnews .addName .el-input input {width:322px;height:34px;display:inline-block;font-size:14px;color:#333;}
	.addnews .addName.from .el-input,.addnews .addName.from .el-input input {width:146px;}
	.addnews span {font-size:16px;color:#333;}
	.addnews .el-upload--picture-card {width:168px;height:82px;background:#f2f2f2;border:none;line-height:82px;}
	.addnews.k .el-upload--picture-card i {margin-top:20px;}
	.addnews .updownvideo .el-upload i em {font-size:14px;color:#ccc;font-style:normal;text-align:center;display:block;margin-top:6px;}
	.addnews .updownvideo .rules {font-style:normal;font-size:12px;color:#ccc;margin-top:8px;display:block;line-height:16px;}
	.addnews .addFeilei .el-input input,.addnews .addFeilei .el-select,.addnews .addFeilei .el-select .el-input{width:148px!important;height:34px;display:inline-block;font-size:14px;color:#333;}
</style>